<template>
  <view class="us">
    <Back title="关于我们"
          :status='true'
          @jump='jump' />
    <view class="main">
      <view class="box">
        <view class="title">关于我们</view>
        <image src="https://pockets.qixdian.cn/upload/20240305/65e6a0f2b5696.png"
               mode="scaleToFill"
               class="box_icon" />
      </view>
      <view class="box">
        <view class="title">编辑资料</view>
        <image src="https://pockets.qixdian.cn/upload/20240305/65e6a0f2b5696.png"
               mode="scaleToFill"
               class="box_icon" />
      </view>
      <view class="box">
        <view class="title">用户协议</view>
        <image src="https://pockets.qixdian.cn/upload/20240305/65e6a0f2b5696.png"
               mode="scaleToFill"
               class="box_icon" />
      </view>
      <view class="box">
        <view class="title">隐私政策</view>
        <image src="https://pockets.qixdian.cn/upload/20240305/65e6a0f2b5696.png"
               mode="scaleToFill"
               class="box_icon" />
      </view>
    </view>
    <view class="logout"
          @click="logout">
      退出登录
    </view>
    <notification ref="dialogpop"
                  @cancel='cancel'
                  :cancel="cancel"
                  :bgc='bgc'
                  @submit="submit"
                  style="width:100%;">
      <view slot="pop">
        <view class="content">
          您确定要退出登录吗？
        </view>
      </view>
    </notification>
  </view>
</template>

<script>
import notification from '../../../components/pop-up'
import Back from '../../../components/back'
export default {
  components: {
    Back,
    notification
  },
  data () {
    return {
      bgc: 'https://pockets.qixdian.cn/upload/20240305/65e6d37f89459.png'
    }
  },
  methods: {
    logout () {
      this.$refs.dialogpop.$refs.popup.open();
    },
    cancel () {
      this.$refs.dialogpop.$refs.popup.close();
    },
    submit () {
      this.$Request.post(this.$api.user.logout).then((res) => {
        if (res.code == 200 || res.code == 304) {
          uni.showToast({
            title: '退出成功',
            icon: 'none',
            mask: true
          })
          uni.removeStorageSync('user_id');
          uni.removeStorageSync('avatar');
          uni.removeStorageSync('nickname');
          uni.removeStorageSync('mobile');
          uni.removeStorageSync('token');
          setTimeout(() => {
            uni.switchTab({
              url: '/pages/index/index'
            })
          }, 500)
        }
      })
    },
    // 返回上一级
    jump () {
      uni.switchTab({ url: '/pages/user/user' })
    }
  }
}
</script>

<style lang='scss' scoped>
.content {
  margin-top: 100rpx;
  font-size: 32rpx;
  color: #fff;
  text-align: center;
}
.us {
  width: 100vw;
  min-height: 100vh;
  /* #ifdef APP-PLUS */
  padding: 100rpx 20rpx 0;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  padding: 150rpx 20rpx 0;
  /* #endif */
  box-sizing: border-box;
  position: relative;
  background: #060a16;
  .main {
    margin: 20rpx auto;
    width: 690rpx;
    // height: 451rpx;
    background: #030524;
    border-radius: 10rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
    .box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      .title {
        // height: 26rpx;
        font-weight: 500;
        font-size: 28rpx;
        color: #ffffff;
      }
      .box_icon {
        width: 16rpx;
        height: 28rpx;
        opacity: 0.5;
      }
    }
  }
  .logout {
    width: 450rpx;
    height: 90rpx;
    background: linear-gradient(-45deg, #529bff, #457dff);
    border-radius: 45rpx;
    margin: 200rpx auto 40rpx;
    color: #ffffff;
    font-size: 36rpx;
    line-height: 90rpx;
    text-align: center;
  }
}
</style>
